import React, { Component } from 'react';
import { Link } from 'react-router-dom';
// import Axios from 'axios';
// require('./../mock')


class Com extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dat: [],
      details: []
    }
  }
  componentDidMount() {
    let f_type = '新秀菜谱';
    let type = JSON.stringify(f_type)
    fetch(`https://sun.daxunxun.com/api/food/type?f_type=`+type)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        dat: data
      })
    })
  }
  goDetail (fid){
    // console.log(fid)
    // console.log(this.props)
    this.props.history.push('/detail/' + fid)
  }
  render() {
    const dat = this.state.dat
    // const id = this.props.data.f_id
    let arr = []
    for (var i in dat) {
      if (i<3) {
        let fid = dat[i].f_id
        arr.push(
          <li key={dat[i].f_id} onClick={ this.goDetail.bind(this, fid)}>
            <img src={dat[i].banner} alt="" />
            <div className="Recipe_spand">
              <span>
                {dat[i].u_name}
              </span>
            </div>
          </li>
        )
      }
    }
    return (

      <div className="Home_Menu">
        <div className="Home_Menu_nav">
          <b>新秀菜谱</b>
          <Link to="" className="Menu_all">全部</Link>
          
        </div>
        <div className="Home_Menu_photo">
          <ul className="_Menu_ul">
            {
              arr
            }
          </ul>

        </div>
      </div>

    )
  }
}

export default Com;